昨天 Day 14 跟大家介紹了 React Hooks 的基本概念之後，今天就要馬上帶大家來看第一個 Hook 函式： useState() 的用法囉～

useState()

又稱作 State Hook ，實現能夠在 Function Component 中使用 State 狀態的一個方法。

我們直接來看下面這個官網範例，幫助大家快速了解這個方法的應用吧！

Class Component 中操作 State

// 在 Class Component <Example> 中撰寫 state，當按鈕被點擊時 count 值 +1
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

在 Class Component 中，我們可以直接在 this.state 給予一個物件的值 { count: 0 } 去做狀態的初始化，並在 render() 函式中監聽點擊事件，當按鈕被點擊時觸發 setState() 方法來改變 this.state 當中的 count 值 +1 。

那如果使用 setState() 這個 Hook Function 的話，要怎麼撰寫呢？

Function Component 中操作 State

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
}

在 Function Component 中我們要操作 state 的話要記得先引用該方法，另外必須採用 JavaScript ES6 解構賦值的方式來宣告兩個變數，第一個變數 count 等同於 Class Component 中 this.state 裡的變數名稱，而第二個變數則是等同於 Class Component 中 setState() 這個函式的名稱。

備註：第二個變數的名稱通常都會採用 set + state變數 這個組合，所以在這邊才會將該函式命名為 setCount 。

而在 useState() 中的參數 0 就是初始化值的設定，所以我們可以把上段程式碼理解成：我們宣告了一個叫做 count 的 state 變數，並將起始值設成了 0。而當我們需要更新目前的 count 值時，我們可以呼叫 setCount 這個方法。

所以同樣操作 State 但是改寫成 Function Component 的話，就會變成這樣的結果：

// 原本 Class Component Example 中的 state 值寫法
<p>You clicked {this.state.count} times</p>

// 改寫成 Function Component 的 Example 其 state 值
<p>You clicked { count } times </p>

而在 render() 中的寫法也改成下面的程式碼：

// 原本 Class Component redner() 中 return 的 state 值變更的寫法
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
</button>

// 改寫成 Function Component 後 redner() 中 return 的 state 值變更的寫法
<button onClick={() => setCount(count + 1)}>
    Click me
</button>

這樣比較兩個不同元件的撰寫方式之後有沒有發現 Function Component 搭配 React Hooks 的寫法確實比原本的 Class Component 簡潔明瞭非常多！
光 useState() 這個方法就可以很明顯的感受到 React Hooks 讓人喜愛的地方了欸～

那今天為大家介紹的第一個 React Hooks ： useState() 就到這邊告一個段落囉～
明天要介紹的是第二個 React Hooks ： useEffect() ，敬請期待！
我們下篇見ʘ‿ʘ